<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
    <p>{{ count }}</p>
    <p>
        <button @click="incrementAsyncqq">++</button>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="decrementAsyncqq">--</button>
    </p>
</div>

<script>
    var store = new Vuex.Store({
        state : {
            count : 0
        },
        mutations : {
            increment(state, num){
                return  state.count = state.count + num;
            },
            decrement: state => state.count--
        },
        actions: {
            incrementAsync ({ commit }) {
                setTimeout(() => {
                    commit('increment', 20)
                }, 1000)
            },
            decrementAsync ({ commit }) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        commit('decrement')
                        resolve()
                    }, 1000)
                })
            }
        }
    })

    new Vue({
        el : '#app',
        store,
        computed: {
            count(){
                return this.$store.state.count
            }
        },
        methods : {
            increment(){
                this.$store.commit("increment", 10)
            },
            decrement(){
                this.$store.commit({type : "decrement"})
            },
            incrementAsyncqq(){
                this.$store.dispatch('incrementAsync')
            },
            decrementAsyncqq(){
                this.$store.dispatch('decrementAsync').then((res) => {
                    console.log('chenggong')
                })
            },
            //取别名
            // ...mapActions({
            //     'incrementAsyncqq': 'incrementAsync',
            // }),
            // ...mapActions([
            //     'incrementAsync'
            // ])
        }
    })
</script>
</body>
</html>
